import React, { Component } from 'react';
import './banner.css';
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';


class Banner extends Component {

    constructor(props){
        super();
        
        this.props = props;
        
        this.state = {
            index:0,
            left:0
        };
    }


    componentWillUnmount(){
        clearInterval(this.timer);
    }

    componentDidMount(){
        this.player();
    }


    /**
     * 渲染图片和标题
     * @param {*} data 
     */
    renderLiList(data) {

        let list = data.map((value, index) =>{

            if(value.link.startsWith('http')){
                return (
                    <li key={index} style={{width:this.props.width}}>
                        <a href={value.link}>
                            <img alt={value.title} className="banner-img" src={value.img} />
                            <span className="banner-title">{value.title}</span>
                        </a>
                    </li>
                );

            } else{
                return (
                    <li key={index} style={{width:this.props.width}}>
                        <Link to={value.link}>
                            <img alt={value.title} className="banner-img" src={value.img} />
                            <span className="banner-title">{value.title}</span>
                        </Link>
                    </li>
                );
            }            
        });

        return list;
    }

    /**
     * 渲染红点
     * @param {*} data 
     */
    renderPoint(data){

        let point = data.map((value, index)=>{

            if(index === this.state.index){
                return (
                    <i key={index} className="icon iconfont icon-dian1 bp-active"></i>
                );
            }else{
                return (
                    <i key={index} className="icon iconfont icon-dian1"></i>
                )
            }
        });

        return point;
    }

    /** 
     * 轮播图片
    */
    player(){
        this.timer = setInterval(()=>{

        let index = this.state.index;
        let width = this.props.width;
        
        index++
        if(index >= this.props.data.length){
            index = 0;
        }

        let left = -index * width;
        
        this.setState({
            index:index,
            left:left
        });

        }, this.props.time);        
    }

    render() {
        let data = this.props.data;
        
        let countWidth = this.props.width * data.length;
        let liList = this.renderLiList(data);
        let points = this.renderPoint(data);
        
        return (
        <div className="banner">
            <div id="banner-img-view" className="banner-img-view">
                <ul style={{width:countWidth,left:this.state.left}} className="banner-img-box">
                    {liList}
                </ul>
            </div>
            <div className="banner-title-shadow">
                <div className="banner-position">
                    {points}
                </div>
            </div>
        </div>
        );
    }
}

export default Banner;